<template>
  <card title="增值服务费" :showDivider="false">
    <div class="add-service-option-list">
      <a-checkbox
        :value="feeDetailItem.itemName"
        v-for="(feeDetailItem, feeDetailItemIndex) in feeOption.childrenList"
        :key="feeDetailItemIndex"
        v-model="feeDetailItem.statics"
      >
        {{ feeDetailItem.itemName }}
      </a-checkbox>
    </div>
    <div :class="[shadow ? 'page-form-block' : '']" v-if="checkedaddServiceFeeList.length > 0">
      <page-form-row>
        <page-form-item
          v-for="(feeDetailItem, feeDetailItemIndex) in checkedaddServiceFeeList"
          :key="feeDetailItemIndex"
          :class="getPageFormItemClass(feeDetailItemIndex, checkedaddServiceFeeList)"
          :label="feeDetailItem.itemName"
          size="1/2"
        >
          <i-input-number v-model="feeDetailItem.amount" />
          <template #label-extra v-if="feeDetailItem.showCostTypeSwitch">
            <a-radio-group class="cost-type-radio" v-model="feeDetailItem.costType">
              <a-radio :value="10">收款</a-radio>
              <a-radio :value="20">付款</a-radio>
            </a-radio-group>
          </template>
        </page-form-item>
      </page-form-row>
    </div>
    <a-divider v-if="showDivider" :style="{ margin: checkedaddServiceFeeList.length > 0 ? '20px 0' : '6px 0 20px 0' }" />
  </card>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    shadow: {
      type: Boolean,
      default: true,
    },
    index: Number,
    list: Array,
    showDivider: {
      type: Boolean,
      default: true,
    },
  })

  const feeOption = computed(() => {
    return props.list[props.index]
  })

  // 选中的增值服务费(optionList)
  const checkedaddServiceFeeList = computed(() => {
    return feeOption.value.childrenList?.filter((item) => {
      return item.statics
    })
  })

  // 最后一行需要增加 mb-0 class
  const getPageFormItemClass = (index, list) => {
    let len = list.length
    let claxxList = []
    // 最后一行有两个
    if (len % 2 == 0 && index >= len - 2) {
      claxxList = ['mb-0']
    }
    // 最后一行有一个
    if (len % 2 == 1 && index >= len - 1) {
      claxxList = ['mb-0']
    }
    return claxxList
  }
</script>
<style lang="less" scoped>
  .add-service-option-list {
    :deep(.arco-checkbox) {
      margin-bottom: 14px;
      margin-right: 14px;
    }
  }
  .cost-type-radio {
    .arco-radio {
      margin-right: 24px;
      padding-left: 0;
    }
    .arco-radio + .arco-radio {
      margin-right: 0;
    }
  }
</style>
